<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>TESCO移动商城-购物车</title>

    <!-- 1. 引入重置样式表 -->
    <link rel="stylesheet" href="./css/normalize.css" />

    <!-- 2. 引入字体图标样式表 -->
    <link rel="stylesheet" href="./lib/font/iconfont.css" />

    <!-- 3. 引入公共样式表 -->
    <link rel="stylesheet" href="./css/common.css" />

    <!-- 4. 引入插件样式表 -->

    <!-- 5. 引入头部样式表 -->

    <!-- 6. 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/shopCar.css" />

    <!-- 7. 引入页脚样式表 -->
    <link rel="stylesheet" href="./css/footer.css" />
  </head>

  <body class="flexDc jcsb mBody">
    <!-- 头部 -->
    <header class="flex aic fs18 tac bgff">
      <div class="back-index cba1">
        <i class="iconfont icon-left-arrow fs26"></i>
      </div>
      <h1 class="flex1">购物车</h1>
    </header>

    <!-- 主要内容 -->
    <main class="flex1 flexDc ofs">
      <!-- 商品列表 -->
      <ul class="flex1 bgff ofs">
        <script>
          for (let i = 0; i < 8; i++) {
            document.write(`
              <li class="flex">
                <div class="shop-checkbox flex flexC">
                  <input class="dx" type="checkbox" />
                </div>
                <div class="shop-content flex1 flex aic rel">
                  <img src="./images/shop-list-img01.webp" alt="图片加载失败" />
                  <div class="flex1">
                    <p class="fs16">Apple iPad 平板电脑</p>
                    <p class="cba1">颜色分类：8GB+ 128GB版</p>
                    <p class=" fs18 ce43">￥<span class="singlePrice">3268.21</span></p>
                  </div>
                  <div class="shop-num tac abs">
                    <span class="reduce dpib">-</span
                    ><input class="txt tac on" type="text" value="1" readonly /><span
                      class="add dpib"
                      >+</span
                    >
                  </div>
                </div>
              </li>
            `);
          }
        </script>
        <!-- 底线 -->
        <div id="bottom-line" class="w96 flex aic c33 mBody">
          <span></span>
          <p class="tac">已经到底了</p>
          <span></span>
        </div>
      </ul>

      <div class="settlement flex jcsb fs18">
        <div class="c33">
          <input class="qx" type="checkbox" />已选(<span class="totleNum"
            >0</span
          >)
        </div>
        <div class="flex">
          <p class="cba1">合计￥ <span class="totlePrice ce43">0.00</span></p>
          <button class="cff bge43">去结算</button>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="flex c8b">
      <a class="flex1 flexDc aic c8b" href="./index.html">
        <i class="iconfont icon-index fs20"></i>
        <span>首页</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./category.html">
        <i class="iconfont icon-classification fs20"></i>
        <span>分类</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./shopCar.html">
        <i class="iconfont icon-shop-car fs20"></i>
        <span>购物车</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./my.html">
        <i class="iconfont icon-my fs20"></i>
        <span>我的</span>
      </a>
    </footer>

    <!-- 页面特效部分 -->

    <!-- 引入jQuery -->
    <script src="./js/jquery-3.7.1.min.js"></script>

    <!-- 引入validate -->

    <!-- 引入插件 -->

    <!-- 引入公共js -->
    <script src="./js/common.js"></script>

    <!-- 引入当前页js -->
    <script src="./js/shopCar.js"></script>
  </body>
</html>
